<template>
	<div class="hello">
		<div class="submit_title">
			<input v-model="title" type="text" placeholder="请输入标题" />
			<input @click="putData" type="button" name="" id="" value="编辑" />
		</div>
		<vue-html5-editor :content="content" :height="500" @change="updateData"></vue-html5-editor>
	</div>
</template>

<script>
	import http from '../assets/js/http.js'
	import { Toast } from 'mint-ui';
	
	export default {
		data() {
			return {
				title: '',
				content: '',
				logo: '',
				uid: '',
				article_id: ''
			}
		},
		created() {
			//通过url获取文章id和uid ?uid=1&article_id=1
			this.article_id = this.$route.query.article_id

			this.getData()
		},
		methods: {
			updateData(content) {
				this.content = content
			},
			getData() {
				let data = {
					id: this.article_id
				}
				let url = '/BusinessApi/ArticleManagement/article_detail'
				this.apiPost(url, data).then(res => {
					console.log('获取文章详情res', res)
					this.handelResponse(res, data => {
						this.title = data.title
						this.content = data.content
					})
				})
			},
			putData() {
				const data = {
					title: this.title, 
					content: this.content,
					logo: this.logo,
					id: this.article_id,
					uid: this.uid,
				}
				// 请求地址
				let url = '/BusinessApi/ArticleManagement/article_edit'
				this.apiPost(url, data).then(res => {
					console.log('获取文章详情res', res)
					Toast({
						message: res.msg,
						duration: 3000
					});
//					this.handelResponse(res, data => {
//						Toast({
//							message: '编辑成功',
//							position: 'bottom',
//							duration: 3000
//						});
//						
//					})
				})
			},
		},
		mixins: [http]
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.submit_title {
		text-align: left;
	}
	
	.submit_title input[type="text"] {
		line-height: 40px;
		border: none;
		padding-left: 10px;
		width: 80%;
		font-size: 20px;
		box-sizing: border-box;
	}
	
	.submit_title input[type="button"] {
		line-height: 40px;
		border: none;
		width: 17%;
		font-size: 20px;
		box-sizing: border-box;
		padding: 0;
		border-radius: 5px;
	}
</style>